<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    width="75%"
  >
    <div>
      <el-table
        stripe
        border
        :data="tableData"
        style="width: 100%"
        :height="maxTableHeight"
      >
        <!-- 表格属性 start -->
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="retryCount" label="重试次数" width="90">
        </el-table-column>
        <el-table-column prop="retryStatus" label="重试状态" width="160">
          <template slot-scope="{ row }">
            <el-tag type="danger" v-if="row.isMaxRetry"
              >已到最大重试次数</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="nextRetryTime" label="下次重试时间" width="280">
          <template slot-scope="{ row }">
            {{ row.nextRetryTime }} (
            {{ $moment(row.nextRetryTime).fromNow() }} )
          </template>
        </el-table-column>
        <el-table-column
          prop="logStatusName"
          label="日志状态"
          width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="hasException"
          label="是否异常"
          width="90"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag
              type="danger"
              v-if="row.exception != null && row.exception != ''"
              >异常</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="exception" label="异常信息"> </el-table-column>
        <el-table-column
          prop="runMilliseconds"
          label="日志信息"
          width="90"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="medium"
              icon="el-icon-document"
              @click="showLogDetail(row)"
            ></el-button>
          </template>
        </el-table-column>
        <!-- 表格属性 end -->
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>

    <!-- JSON详情窗口 -->
    <el-dialog
      title="日志信息"
      :visible.sync="jsonData.show"
      width="50%"
      append-to-body
    >
      <JsonViewer
        :expand-depth="10"
        copyable
        boxed
        sort
        theme="my-awesome-json-theme"
        :value="jsonData.data"
      />
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import listMixins from "@/views/base/listMixins";

// 请求接口 start
import sysApi from "@/api/sysApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "RetryLog",
  // 组件名称 start
  mixins: [listMixins],
  data() {
    return {
      // 表格高度
      maxTableHeight: `${document.documentElement.clientHeight}` - 500,
      // 弹窗标题
      title: "重试日志",
      // 弹窗显示标志
      dialogVisible: false,
      // 数据 start
      permission: {},
      query: {
        key: "",
        serviceIp: "",
      },
      // 数据 end
      // 数据 end
      jsonData: {
        show: false,
        data: "",
      },
    };
  },
  methods: {
    showLogDetail(row) {
      this.jsonData.show = true;
      this.jsonData.data = row.meta;
    },
    // 是否显示弹窗
    showDialog(row) {
      this.query.key = row.key;
      this.query.serviceIp = row.serviceIp;
      this.dialogVisible = true;
    },
    remoteTableData() {
      if (null != this.query.sn) {
        // 分页请求 start
        sysApi.retryLogTask.logListPage(this.searchParams()).then((res) => {
          this.updateTableData(res.data);
        });
        // 分页请求 end
      }
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>
<style lang="less">
.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button {
    color: #49b3ff;
  }
  .jv-node {
    margin-top: 5px;
    .jv-push {
      .jv-key {
        // color: rgba(64, 158, 255, 0.8);
        margin-right: 5px;
      }
    }
  }
  .jv-key-node {
    height: 20px;
    line-height: 20px;
  }

  .jv-item {
    &.jv-array {
      color: #111111;
    }
    &.jv-boolean {
      color: #fc1e70;
    }
    &.jv-function {
      color: #067bca;
    }
    &.jv-number {
      color: #fc1e70;
    }
    &.jv-number-float {
      color: #fc1e70;
    }
    &.jv-number-integer {
      color: #fc1e70;
    }
    &.jv-object {
      color: #111111;
    }
    &.jv-undefined {
      color: #e08331;
    }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      margin-right: 5px;
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}
</style>